import Designer from './lib';

// 创建画布
const stage = new Designer.Stage({
  container: '#container',
  width: 1200,
  height: 798,
  autoSize: true, // 根据 container 元素自动设置宽高
  // eventEnabled: false,
  // draggable: false,
  // scaleable: false,
  selectable: true,
});
window.stage = stage;

stage.on('draw', function () {
  // document.querySelector('#offset').innerHTML = `X: ${stage.offset.x}, Y: ${stage.offset.y}`;
  document.querySelector('#scale').innerHTML = `${stage.scale}`;
});
stage.draw();
// stage.on('mousemove', function (evt) {
//   console.log(evt.target.name, evt.currentTarget.name);
// });

const image1 = new Designer.Image({
  x: 20,
  y: 20,
  width: 200,
  height: 200,
  name: 'image1',
  src: 'https://blog.swzj.fun/logo.png',
  draggable: true,
});
const image2 = new Designer.Image({
  x: 20,
  y: 300,
  width: 200,
  height: 200,
  name: 'image2',
  src: 'https://blog.swzj.fun/logo.png',
  clipping: { x: 150, y: 150, w: 500, h: 500 },
  rotation: 30,
  scale: 1.5,
});
const text1 = new Designer.Text({
  x: 250,
  y: 0,
  width: 120,
  name: 'text1',
  text: '这是一段测试文本这是一段测试文本,这是一段测试文本,这是\n一段测试文本',
  // color: '#2490F1',
  // fontStyle: 'italic',
  fontWeight: 'bold',
  fontSize: 12,
  // lineHeight: 20,
  align: 'left', // 水平对齐方式 left | center | right
  verticalAlign: 'middle', // 垂直对齐方式  top | middle | bottom
  // letterSpacing: 10,
  wrap: true,
  // lineThrough: true,
  // underline: true,
});
const text2 = new Designer.Text({
  x: 600,
  y: -200,
  name: 'text2',
  text: '注意：<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。\ngetContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。\n本手册提供完整的 getContext("2d") 对象的属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。',
  color: '#FF0000',
  wrap: true,
});
const text3 = new Designer.Text({
  x: 100,
  y: -50,
  name: 'text3',
  text: 'group2group2group2group\n2group2group2group2grou',
  color: '#272C35',
  wrap: true,
  lineThrough: true,
  rotation: 40,
  scale: 1.5,
});
text3.on('mousemove', function (evt) {
  console.log(evt.target.name, evt.currentTarget.name);
  evt.stopPropagation();
});

const group1 = new Designer.Group({
  x: 950,
  y: 10,
  width: 200,
  height: 200,
  name: 'group1',
  rotation: 30,
  scale: 1.5,
});
group1.add(
  new Designer.Image({
    x: 20,
    y: 20,
    width: 200,
    height: 200,
    name: 'group1image1',
    src: 'https://blog.swzj.fun/logo.png',
  }),
  new Designer.Text({
    x: 10,
    y: 10,
    name: 'group1text1',
    text: 'group1',
    color: '#272C35',
    wrap: true,
  }),
);

const group2 = new Designer.Group({
  x: 50,
  y: 0,
  name: 'group2',
  rotation: 30,
  scale: 1.5,
});
group2.add(text3);
const image3 = new Designer.Image({
  x: 200,
  y: 200,
  width: 200,
  height: 200,
  name: 'image3',
  src: 'https://blog.swzj.fun/logo.png',
});

const group3 = new Designer.Group({
  x: 800,
  y: 600,
  name: 'group3',
  rotation: 20,
  scale: 1,
});
group3.add(...[group2, image3]);

const board = new Designer.Board({
  x: 390,
  y: 80,
  width: 435,
  height: 700,
  name: 'board1',
  clip: true, // 裁剪绘图区域
  clipShow: true, // 以半透明方式显示裁剪区域
  // zIndex: 1,
});
board.add(
  new Designer.Text({
    x: 0,
    y: 0,
    name: 'boardTitle',
    text: '画板',
    color: '#272C35',
  }),
  new Designer.Image({
    x: 20,
    y: 20,
    width: 200,
    height: 200,
    name: 'boardImage1',
    src: 'https://blog.swzj.fun/logo.png',
  }),
  new Designer.Image({
    x: -200,
    y: 200,
    name: 'boardImage2',
    src: 'https://blog.swzj.fun/avatar.png',
    rotation: 30,
    scale: 0.5,
  }),
);

stage.add(image1, image2);
stage.add(text1, text2);
stage.add(group1, group3);
stage.add(board);
stage.clearHistory();
stage.adaptive();
console.log('stage: ', stage);
